<template>
  <div class="content">
  <div class="profile-view">
    <div class="avatar-section">
      <el-avatar
          :src="txjpg"
          :size="200"
          shape="circle"
      />
    </div>

    <el-tabs tab-position="left" style="height: 450px" class="demo-tabs">
      <el-tab-pane label="账号">
        <el-card class="info-card">
          <el-form label-position="top">
            <el-form-item label="账号ID">
              <el-input v-model="profile.username" readonly />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="profile.password" type="password" readonly />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="profile.email" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="密码">
        <el-card class="info-card">
          <el-form label-position="top">
            <el-form-item label="原密码">
              <el-input v-model="pswChange.oldPassword" />
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="pswChange.newPassword" />
            </el-form-item>
            <el-form-item label="再次输入新密码">
              <el-input v-model="pswChange.configPassword" />
            </el-form-item>
            <div style="display: flex;justify-content: end;">
              <el-button type="primary" >确认修改</el-button>
            </div>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="信息">
        <el-card class="info-card">
          <el-form label-position="top">
            <el-form-item label="身份">
<!--              <el-input v-model="profile.username" readonly/>-->
              {{getUserRole(userRoles)}}
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import txjpg from '@/assets/0002.jpg';
import { tokenStore, accountStore, loginStore, priStore } from '@/store/modules/user'

const userRoles = priStore().pri;
const account = accountStore().getAccount;
const psw = priStore().getPri;


const profile = ref({
  username: account,
  password: "*",
  identity: userRoles,
  email: "123@bjtu.edu.cn"
});

const pswChange = ref({
  oldPassword: '',
  newPassword: '',
  configPassword: ''
});

function getUserRole(userPri) {
  console.log("userPri",userPri)
  switch (userPri) {
    case '4':
      return '护工';
    case '3':
      return '管理员';
    case '2':
      return '普通用户';
    case '1':
      return '守卫';
    default:
      return '未定义';
  }
}
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-content: center;
}

.profile-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 80%;
  padding: 40px;
  margin: 40px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.avatar-section {
  margin: 80px;
}

.info-card {
  width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 42px;
  font-weight: 700;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

</style>
